<template>
  <div class="statistics">
    <Modal v-model="checkModal" title="身份验证" :width="500" :mask-closable="false" :closable="false" class="modealClass">
			<div class="antd-pe-person person-zb" style="position:static">
				<Form ref="formSecondCheck" :model="formData" :label-width="80" :rules="ruleValidate">
          <FormItem label="发送方式" prop="types">
            <CheckboxGroup v-model="formData.types">
              <Checkbox label="sms">
                <Icon type="md-phone-portrait" />
                <span>短信</span>
              </Checkbox>
              <Checkbox label="email" style="margin-left:10px">
                <Icon type="md-mail" />
                <span>邮件</span>
              </Checkbox>
            </CheckboxGroup>
            <Button class="sendBtn" :disabled="disabled" @click="sendMessage()"><span>{{sendTime}}</span><span> {{this.sendText}}</span></Button>
          </FormItem>
          <FormItem label="验证码" prop="verifyCode">
            <Input v-model="formData.verifyCode" placeholder="请输入验证码"/>
          </FormItem>
        </Form>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="saveLoading" long @click="confirm()">提交</Button>
			</div>
		</Modal>
  </div>
</template>

<script>

import { request } from 'utils/http'
import pageUtil from '../../lib/bh-vue/utils/pageUtil'
import { serialize } from 'utils'

export default {
  data() {
    return {
      checkModal: false,
      saveLoading: false,
      disabled: false,
      formData: {},
      ruleValidate: {
        verifyCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      sendTime: null,
      sendText: "立即发送",
      timer: null,
      formUrl: null,
      checkOptions: [],
      // formOnly: false
    }
  },
  props: {
    // meta: {
    //   type: Array,
    //   default: null
    // }
  },
  methods: {
    sendMessage() {
      const _this = this
      if(!this.formData.types || this.formData.types.length === 0){
        pageUtil.tip("请至少选择一个发送方式", "warning")
        return
      }
      this.formUrl = window.contextPath + this.formUrl.replace("showForm", "sendIdentifyCode")
      $.ajax({
        type: 'POST',
        url: this.formUrl,
        data: {
          types: this.formData.types
        },
        contentType: "application/x-www-form-urlencoded",
        success: function(res){
          if(res.msg){
            pageUtil.tip(res.msg, "danger")
          }else{
            _this.sendMessageTimer()
          }
        },
        error: function (res) {
          pageUtil.tip("请求出错", "danger")
        }
      })
    },
    sendMessageTimer() {
      this.disabled = true
      this.sendTime = 60
      this.timer = setInterval(() => {
        if(this.sendTime <= 0){
          this.sendTime = null
          this.disabled = false
          this.sendText = "再次发送"
          clearInterval(this.timer);
        }else{
          this.sendTime --
        }
      }, 1000)
    },
    confirm() {
      this.$refs.formSecondCheck.validate((valid) => {
        if(valid){
          this.$emit("on-confirm", this.formData, this.checkOptions)
          setTimeout(() => {
            this.checkModal = false
          }, 1000)
        }
      })
    }
  },
  computed: {
    
  },
  components: {
    
  }
}
</script>

<style scoped>
  .ivu-modal-content{
    background-color: #F6F9FE;
  }

  .sendBtn{
    height: 24px;
    line-height: 10px;
    position: absolute;
    right: 0;
    top: 5px;
  }

  .statistics {
    margin-bottom: 4px;
    background: #E7F5FF;
    border: 1px solid #ADD9FD;
    padding: 10px 20px 5px 20px;
  }
</style>
